<template>
  <div>
    <table>
      <tr>
        <td rowspan="2">领导主抓直管</td>
        <td colspan="3">场景类型</td>
        <td colspan="2">是否立项</td>
        <td colspan="3">场景进度</td>
      </tr>
      <tr>
        <td>揭榜</td>
        <td>试点</td>
        <td>其他</td>
        <td>是</td>
        <td>否</td>
        <td>已招标</td>
        <td>建设中</td>
        <td>完工</td>
      </tr>
      <tr>
        <td><div class="hoverClass" @click="gotoData('领导主抓直管')">50</div></td>
        <td><div class="hoverClass" @click="gotoData('揭榜')">2</div></td>
        <td><div class="hoverClass" @click="gotoData('试点')">4</div></td>
        <td><div class="hoverClass" @click="gotoData('其他')">4</div></td>
        <td><div class="hoverClass" @click="gotoData('是')">6</div></td>
        <td><div class="hoverClass" @click="gotoData('否')">11</div></td>
        <td><div class="hoverClass" @click="gotoData('已招标')">3</div></td>
        <td><div class="hoverClass" @click="gotoData('建设中')">6</div></td>
        <td><div class="hoverClass" @click="gotoData('完工')">8</div></td>
      </tr>
    </table>
    <div>
      <el-dialog
        v-dialogDrag
        :title="title"
        :visible.sync="dialogVisible"
        append-to-body
        width="60%"
        class="dialogWrap"
      >
        <div class="dialogClass" style="overflow-y:auto">
          <scrollBoard />
        <!-- <table-common
          :menu-id="menuId"
          :form-guid="formGuid"
          :is-show="false"
        /> -->
        </div>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import tableCommon from '@/components/tableCommon/index.vue';
import scrollBoard from './scrollBoard1';
export default {
  name: 'ShowTable',
  components: {
    // tableCommon,
    scrollBoard
  },
  provide: {
    isShow: false
  },

  data() {
    return {
      dialogVisible: false,
      formGuid: '',
      menuId: '',
      title: ''
    };
  },
  methods: {
    gotoData(name) {
      this.title = name;
      const loading = this.$loading({
        lock: true,
        text: '读取数据中....',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        this.dialogVisible = true;
        if (name === '领导主抓直管') {
          this.menuId = 1623395792097;
        } else if (name === '揭榜') {
          this.menuId = 1623396058321;
        } else if (name === '试点') {
          this.menuId = 1623396100220;
        } else {
          this.menuId = 1623396110644;
        }
      }, 1000);
    }

  }
};
</script>

<style scoped lang="scss" >
    td {
        border: 1px solid #fff;
        text-align: center;
        height: 33px;
        width: 350px;
        color: #fff;
    }

    table {
        border-collapse: collapse;
    }
    .hoverClass:hover{
      cursor: pointer;
      text-decoration: underline
    }
    .dialogWrap /deep/ .el-dialog__header {
      border-bottom: 1px solid #cec9c9;
      padding: 10px;
      background-color: #0840a9 !important;
    }
     .dialogWrap /deep/ .el-dialog__title {
      line-height: 24px;
      font-size: 18px;
      color: #fff !important;
      font-weight: bolder;
    }
    .dialogWrap /deep/ .el-dialog__body {
    padding: 0px;
    color: #606266;
    font-size: 15px;
    }

</style>
